<template>
  <div class="sidebar-card">
    <h3>每日签到</h3>
    <p style="text-align: center; margin: 10px 0;">2025年6月</p>
    <table class="calendar">
      <thead>
        <tr>
          <th>日</th><th>一</th><th>二</th><th>三</th><th>四</th><th>五</th><th>六</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="week in weeks" :key="week">
          <td v-for="day in week" :key="day">{{ day }}</td>
        </tr>
      </tbody>
    </table>
    <button class="sign-button">点击签到</button>
  </div>
</template>

<script setup lang="ts">
defineOptions({
  name: "SignInCalendar"
});
const weeks = [
  ['', '', '', '', '', '', 1],
  [2, 3, 4, 5, 6, 7, 8],
  [9, 10, 11, 12, 13, 14, 15],
  [16, 17, 18, 19, 20, 21, 22],
  [23, 24, 25, 26, 27, 28, 29],
  [30, '', '', '', '', '', '']
];
</script>

<style scoped>
.calendar {
  width: 100%;
  border-collapse: collapse;
  text-align: center;
}
.calendar th, .calendar td {
  width: 14%;
  height: 30px;
  border: 1px solid #eee;
}
.sign-button {
  background-color: #ec4899;
  color: white;
  width: 100%;
  padding: 8px;
  border: none;
  border-radius: 4px;
  margin-top: 10px;
  cursor: pointer;
}
.sign-button:hover {
  background-color: #f472b6;
}
</style>
